const items = document.querySelectorAll(".box-container")
const tips = document.querySelectorAll(".tip")
let flag = true;
let currentIndex = 0;
const itemScroll = (from,to) => {
    if (!flag){
        return;
    }

    if (from === to){
        return;
    }

    flag = false

    let left = true;
    if (from > to){
        left = false;
    }

    to = to < 0 ? items.length - 1 : to >= items.length ? 0 : to

    currentIndex = to

    const value = left ? "100%" : "-100%"

    const endValue = left ? "-100%" : "100%"

    items[to].style = `left:${value};`
    tips.forEach(tip=>{
        tip.classList.remove("tip-current")
    })
    tips[to].classList.add("tip-current")
    new Promise((resolve, reject) => {
        setTimeout(()=>{
            items[from].style = `left:${endValue};`
            items[to].style = `left:0`
            resolve()
        },10)
    }).then(e=>{
        new Promise(resolve => {
            setTimeout(() => {
                items.forEach((item,index)=>{
                    if (index != to){
                        item.style = 'display:none'
                    }
                })
                resolve()
            }, 400)
        }).then(r => {
          setTimeout(()=>{
              flag = true;
          },100)
        })
    })


}
document.onmousewheel = (e) => {
    if (window.innerWidth <= 1021){
        return;
    }
    if (e.wheelDelta > 0){
        itemScroll(currentIndex,currentIndex - 1)

    }else{
        itemScroll(currentIndex,currentIndex + 1)
    }
}

document.getElementById('showIframe').addEventListener('click', function() {
    var iframeContainer = document.getElementById('iframeContainer');
    if (iframeContainer.classList.contains('hidden')) {
        iframeContainer.classList.remove('hidden');
        iframeContainer.classList.add('show');
    } else {
        iframeContainer.classList.remove('show');
        iframeContainer.classList.add('hidden');
    }
});

const tab_submit = (parent) =>{
    const tab_items = document.querySelectorAll(`${parent} .tab-scroll-item`)
    const tab_title = document.querySelectorAll(`${parent} .tab-title`)
    tab_title.forEach(item => {
        item.onmouseover = (e) => {
            const title_index = item.getAttribute("data-cs-id")
            let current_index = 1;
            tab_items.forEach((item,index) => {
                if (item.getAttribute("data-cs-id") == title_index){
                    current_index = index
                }
            })
            tab_title.forEach(item=>{
                item.classList.remove("tab-current")
            })
            tab_items.forEach((item,index)=>{
                let transform_offset = index == current_index ? 0 : (Math.abs(index - current_index) - 1) * 100
                console.log(transform_offset,item)
                let transform = -(current_index * 100)
                item.style = `transform: translateX(${transform + (index - current_index > 0 ? -transform_offset : transform_offset) + (index == current_index ? 0 : (index - current_index > 0 ? 1 : -1))}%);`
            })
            item.classList.add("tab-current")

        }
    })
}
tab_submit(".team")
tab_submit(".info")
let menu = false
document.querySelector(".navbar-toggler").onclick = function (){
    if (!menu){
        document.querySelector(".float-menu").classList.remove("menu-hidden")
        document.querySelector(".navbar-toggler span").classList.add("btn-close")
        document.querySelector(".navbar-toggler span").classList.remove("navbar-toggler-icon")
    }else{
        document.querySelector(".float-menu").classList.add("menu-hidden")
        document.querySelector(".navbar-toggler span").classList.remove("btn-close")
        document.querySelector(".navbar-toggler span").classList.add("navbar-toggler-icon")

    }
    menu = !menu
}
document.querySelector(".float-menu svg").onclick = function (){
    menu = !menu
    document.querySelector(".float-menu").classList.add("menu-hidden")
    document.querySelector(".navbar-toggler span").classList.remove("btn-close")
    document.querySelector(".navbar-toggler span").classList.add("navbar-toggler-icon")
}
